<template>
 <view class="business">
   <view class="nav d_f j_c_c a_i_c">
   	<view class="text">Try ChatGPT</view>
   	<image src="../../static/ct_0031_返回键.png" mode="" class="right" @tap="back"></image>
   </view>
   <image src="../../static/ct_0012_绿色顶.png" mode="" class="header"></image>
   <view class="box">
	  
	   <view class="" v-for="(item,index) in list" :key="index">
		   
		   <view class="left" v-if="item.type==0">
			   <image src="../../static/ct_0038_logo.png" mode="" class="leftLogo"></image>
			   <view class="text">
				   <view v-if="!item.show&&item.value">{{item.value}}</view>
				   <u-loading mode="flower" v-if="item.show"  :show="item.show"></u-loading>
			   </view>
			    
		   </view>
		   <view class="right" v-if="item.type==1">
			    <view class="text">{{item.value}}</view>
		   		<image src="../../static/ct_0038_logo.png" mode="" class="rightLogo"></image>
		   </view>
	   </view>
   </view>
   <view class="buttom d_f a_i_c f_d_c w_100">
	   <view class="button d_f a_i_c j_c_c" @tap="response">Regenerate Response</view>
	   <view class="input d_f a_i_c">
		   <u-input v-model="value"  :border="false" placeholder="Send a message" @confirm="send" />
		   <image src="../../static/send.png" mode="" class="send" @tap="send"></image>
	   </view>
   </view>
 </view>
</template>

<script>
 export default {
   data () {
     return {
     value:'',
	 list:[],
	 flag:true,
	 val:'',
     }
   },
   components: {

   },
   methods: {
      back(){
      	uni.navigateBack({
      		delta: 1
      	});
      },
	   //获取数据
	  send(){
		  if(!this.flag)return
		  this.flag=false
		  this.list.push({value:this.value,type:1})
		  this.val=JSON.parse(JSON.stringify(this.value))
		  this.list.push({value:'',type:0,show:true})
		  setTimeout(()=>{
			  this.value=''
		  },200)
		this.$api.chatList({question:this.value}).then(res=>{
			this.list[this.list.length-1].value=res.data
			this.list[this.list.length-1].show=false
			
			this.flag=true
		})  
	  },
	  response(){
		   this.list.push({value:this.val,type:1})
		   this.list.push({value:'',type:0,show:true})
		 this.$api.chatList({question:this.val}).then(res=>{
		 	this.list[this.list.length-1].value=res.data
		 	this.list[this.list.length-1].show=false
		 })  
	  }
	 
   },
   onShow() {

   },
   onLoad(options) {
   },
   watch: {

   },
   computed: {

   }
 }
</script>

<style scoped lang='scss'>
.business{
	width: 100%;
	height: 100%;
	background: rgb(239, 237, 238);
	position: relative;
	.nav {
		width: calc(100% - 64rpx);
		height: 160rpx;
		margin-left: 32rpx;
		position: relative;
	    z-index: 9999;
		.text {
			font-size: 32rpx;
			font-weight: 700;
		color: #FFFFFF;
		}
	
		.right {
			width: 20rpx;
			height: 32rpx;
			position: absolute;
			left: 0rpx;
			z-index: 999;
			transform: rotate(180deg);
		}
	}
	.header{
		 position: absolute;
		 top: 0rpx;
		 width: 100%;
		 height: 229rpx;
		 z-index: 1;
	}
	.box{
		width: calc(100% - 64rpx);
		height: calc(100% - 480rpx);
		background: #F2F4F5;
		margin-left: 32rpx;
		margin-top: 80rpx;
		overflow-y: auto;
		overflow-x: hidden;
		.left{
			justify-content: flex-start;
			position: relative;
			padding: 30rpx 20rpx;
			display: flex;
			.leftLogo{
				width: 65rpx;
				height: 65rpx;
			}
			.text{
				width: 400rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-left: 20rpx;
			}
		}
		.right{
			justify-content: flex-end;
			padding: 30rpx 20rpx;
			position: relative;
			display: flex;
			.text{
			width: 400rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			}
			.rightLogo{
				width: 65rpx;
				height: 65rpx;
				margin-left: 20rpx;	
			}
		}
	}
	.buttom{
		position: fixed;
		bottom: 32rpx;
		width: calc(100% - 64rpx);
		margin-left: 32rpx;
		.button{
			width: 300rpx;
			height: 70rpx;
			background: rgb(100,186,143);
			color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 20rpx;
		}
		.input{
			width: 100%;
			border: 1rpx solid #ccc;
			border-radius: 20rpx;
			height: 80rpx;
			margin-top: 32rpx;
			padding: 0rpx 16rpx;
			position: relative;
		}
		.send{
			width: 48rpx;
			height: 48rpx;
		}
	}
}
</style>